<template>
  <div class="domain-query">
    <el-input
      v-model="domain"
      placeholder="请输入域名"
      style="width: 300px; margin-right: 10px;"
    />
    <el-button type="primary" @click="fetchRecords">查询</el-button>

    <el-table :data="records" v-if="records.length" style="margin-top: 20px;">
      <el-table-column prop="customerName" label="客户姓名" />
      <el-table-column prop="domain" label="域名" />
      <el-table-column prop="insertCount" label="插入次数" />
      <el-table-column prop="createTime" label="最后插入时间">
        <template #default="scope">
          {{ formatDateTime(scope.row.createTime) }}
        </template>
      </el-table-column>
      <el-table-column prop="remark" label="备注" />
    </el-table>

    <el-message v-if="errorMessage" type="error">{{ errorMessage }}</el-message>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import request from '@/config/axios'
import { formatDateTime } from '@/utils/formatTime' // 改用 formatDateTime

const domain = ref('')
const records = ref<any[]>([])
const errorMessage = ref('')

// 查询插入记录
const fetchRecords = async () => {
  if (!domain.value) {
    errorMessage.value = '请输入域名'
    return
  }
  errorMessage.value = ''
  
  try {
    const response = await request.get({
      url: `/weiyi/leads/domain/get`,
      params: { domain: domain.value }
    })
    
    console.log('查询结果:', response)

    if (response) {
      records.value = [response]
    } else {
      errorMessage.value = '未找到相关记录'
      records.value = []
    }
  } catch (error) {
    errorMessage.value = '查询失败，请稍后重试'
    console.error(error)
  }
}
</script>

<style scoped>
.domain-query {
  padding: 20px;
}
</style> 